<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>学会人员资料</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />

    <style>
    	html, body {width: 100%;min-height: 100%;background: #f0f0f0;}
    	.h20 {height: 0.5rem;background: #f0f0f0;}

		/* 数据 */
    .declare li .cont_list {
      padding: 0.75rem 0;
      display: block;
      width: 100%;
    }
    .cont_list span {
      float: left;
      color: #999;
      margin-right: 1rem;
    }
    .cont_list h6 {
      color: #333;
    }
    .cont_list h6 span {
      color: #333;
      float: none;
      margin-right: 1rem;
    }
		.aui-list .aui-list-item-right, .aui-list-item-title-row em {
			max-width: none;
		}
		.itemIco {
			width: 3rem;
			height: 3rem;
			border-radius: 50%;
		}
    .declare .xq span {
      color: #999;
      margin-right: 0.5rem;
    }
    .declare ul,.declare ul li:nth-of-type(1) .aui-list-item,.declare ul li:nth-last-of-type(1) .aui-list-item {
      background-size: 0;
    }
    .save_but {
      background-color: #2997e4;
      font-size: 0.8rem;
      color: #fff;
      padding: 0.5rem 0;
      margin: 2rem 0.75rem 0;
      text-align: center;
      border-radius: 4px;
    }

    .enshrine .aui-list-item-inner {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      box-orient: vertical;
      -webkit-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
      align-items: flex-start;
    }
    .name {
      font-size: 0.8rem;
      color: #333
    }
		.zy {
			color: #999;
			font-size: 0.6rem;
		}

    .declare ul,.declare ul li:nth-of-type(1) .aui-list-item,.declare ul li:nth-last-of-type(1) .aui-list-item {
      background-size: 0;
    }
    </style>
</head>
<body>
	<div id="app" v-cloak>
	<!-- 第一块 -->
    <div class="h20"></div>
    <div class="aui-content enshrine">
        <ul class="aui-list aui-media-list">
            <li class="aui-list-item">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-media dataIco">
											<!-- <img :src="info.headImg" v-if="info.headImg && info.headImg != ''">
                      <img src="../../image/wdr@3x.png" v-else> -->
											<div v-if="info.headImg != null || info.headImg != ''" class="itemIco" :style="'background: url('+ info.headImg +') center/cover no-repeat'"></div>
											<div v-else class="itemIco" style="background: url(../../image/wdr@3x.png) center/cover no-repeat"></div>
                    </div>
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title name">{{info.nickname}}</div>
                        </div>
                        <div class="aui-margin-t-5">
                            <div class="aui-info-item zy">{{info.profession}}</div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
	<div class="h20"></div>

	<!-- 第二块 -->
  <div class="aui-content declare">
	    <ul class="aui-list aui-list-in">
	        <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="cont_list">
	                	<span>性别</span>
										<h6 v-if="info.sex == 1">男</h6>
  									<h6 v-else-if="info.sex == 2">女</h6>
	                </div>
	            </div>
	        </li>
          <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="cont_list">
	                	<span>地区</span>
  									<h6>{{info.address}}</h6>
	                </div>
	            </div>
	        </li>
					<li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="cont_list">
	                	<span>年龄</span>
  									<h6>{{info.age}}</h6>
	                </div>
	            </div>
	        </li>
          <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="cont_list">
	                	<span>职业</span>
  									<h6>{{info.profession}}</h6>
	                </div>
	            </div>
	        </li>
	    </ul>
	</div>
	<div class="h20"></div>

	<!-- 第三块 -->
	<div class="aui-content declare">
	    <ul class="aui-list aui-list-in">
	        <li>
	            <div class="aui-list-item-inner aui-list-item">
	                <div class="cont_list">
	                	<span>兴趣</span>
  									<!-- <h6><span>摄影</span><span>篮球</span><span>交友</span></h6> -->
										<h6>{{info.interest}}</h6>
	                </div>
	            </div>
	        </li>
	    </ul>
	</div>

  <!-- 保存按钮 -->
	<div v-if="isID" class="save_but" @click="to_chat(info.userid,info.nickname)">
		打招呼
	</div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">


	//打开聊天窗口
	function to_chat(id, name,type) {
		console.log(name);
		api.openWin({
			name: 'user_info_' + id,
			url: '../forth_frame/user_info_details_win.html',
			pageParam: {
				id: id,
				name: name,
				chat_type:'PRIVATE'
			}
		});
	}
apiready = function() {

	var app = new Vue({
		el: '#app',
		data: {
			id: 0,
			info: {},
			isID: 1
		},
		created: function() {
			var $_this = this;
			$_this.id = api.pageParam.id
			if($api.getStorage('data').userid == $_this.id) {$_this.isID = 0}
			console.log($_this.id)
			api.ajax({
				url: window.Url.getOthorUser + $_this.id,
				timeout: 300,
			}, function(ret, err) {
					if (ret) {
							// api.alert({ msg: JSON.stringify(ret) });
							$_this.info = ret.data
					} else {
							api.alert({ msg: JSON.stringify(err) });
					}
			})
		},
		methods: {
		}
	})
}
</script>
</html>
